<template>
  <!-- 日志 -->
  <el-card class="log">

    <el-alert title="共100条信息" type="info" show-icon :closable="false" />
    <!-- 表格 -->

    <el-table
      :header-cell-style="{ background: '#fafafa' }"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="type"
        label="操作类型"
        width="300"
        align="center"
      />
      <el-table-column prop="name" label="操作人" align="center" width="300" />
      <el-table-column
        prop="results"
        label="执行结果"
        align="center"
        width="300"
      />
      <el-table-column
        prop="time"
        label="操作时间"
        align="center"
        width="200"
      />
      <el-table-column
        prop="description"
        label="描述"
        align="center"
        width="200"
      />
    </el-table>
    <!-- 分页器 -->
    <el-row type="flex" justify="end">
      <el-pagination
        background=""
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
      />
    </el-row>

  </el-card>

</template>

<script>
const defaultdata = {
  type: 'CN',
  name: '王小虎',
  results: '上海市普陀区金沙江路 1518 弄',
  time: '1997-11-13 06:12:22',
  description: '33.99'
}
export default {
  name: 'LogIndex',

  data() {
    return {
      tableData: [],
      currentPage4: 1,
      total: 100,
      pagesize: 10
    }
  },

  mounted() {},
  created() {
    this.gettableData()
  },
  methods: {
    gettableData() {
      for (let i = 0; i < this.pagesize; i++) {
        this.tableData.push(defaultdata)
      }
    },
    async handleSizeChange(val) {
      this.pagesize = val
      this.tableData = []
      await this.gettableData()
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.log {
  margin: 20px;
  .el-table--fit {
    margin-top: 20px;
  }
}
</style>
